```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WeChat Assistant Pro - 智能微信机器人管理平台</title>
    <link href="https://cdn.staticfile.org/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <link href="https://cdn.staticfile.org/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.min.js"></script>
    <style>
        body {
            font-family: 'Noto Sans SC', Tahoma, Arial, Roboto, "Droid Sans", "Helvetica Neue", "Droid Sans Fallback", "Heiti SC", "Hiragino Sans GB", Simsun, sans-serif;
            color: #333;
            line-height: 1.6;
        }
        h1, h2, h3, h4 {
            font-family: 'Noto Serif SC', serif;
            font-weight: 600;
        }
        .hero-gradient {
            background: linear-gradient(135deg, #6e8efb 0%, #a777e3 100%);
        }
        .card-hover {
            transition: all 0.3s ease;
        }
        .card-hover:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        }
        .feature-icon {
            font-size: 2.5rem;
            background: linear-gradient(135deg, #6e8efb 0%, #a777e3 100%);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }
        .section-divider {
            height: 1px;
            background: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(110,142,251,0.5) 50%, rgba(0,0,0,0) 100%);
        }
    </style>
</head>
<body class="bg-gray-50">
    <!-- Hero Section -->
    <section class="hero-gradient text-white py-20 px-4 md:px-0">
        <div class="container mx-auto max-w-5xl flex flex-col md:flex-row items-center">
            <div class="md:w-1/2 mb-10 md:mb-0">
                <h1 class="text-4xl md:text-5xl font-bold mb-4">WeChat Assistant Pro</h1>
                <h2 class="text-xl md:text-2xl font-medium mb-6 opacity-90">智能微信机器人管理平台</h2>
                <p class="text-lg mb-8 opacity-90">基于Wechaty的开源解决方案，轻松接入ChatGPT等AI服务，实现微信自动化管理</p>
                <div class="flex flex-wrap gap-4">
                    <a href="https://github.com/leochen-g/wechat-assistant-pro" class="bg-white text-purple-600 hover:bg-gray-100 px-6 py-3 rounded-lg font-semibold transition-all duration-300 flex items-center">
                        <i class="fab fa-github mr-2"></i> GitHub 仓库
                    </a>
                    <a href="#getting-started" class="bg-transparent border-2 border-white hover:bg-white hover:text-purple-600 px-6 py-3 rounded-lg font-semibold transition-all duration-300">
                        快速开始
                    </a>
                </div>
            </div>
            <div class="md:w-1/2 flex justify-center">
                <img src="https://cdn.nlark.com/yuque/0/2025/png/21449790/1753945145800-ddcf4860-4044-4852-bc80-b09a68a67b9b.png" alt="WeChat Assistant Pro界面" class="rounded-lg shadow-2xl max-w-full h-auto" style="max-height: 350px;">
            </div>
        </div>
    </section>

    <!-- Problems Section -->
    <section class="py-16 px-4 md:px-0 bg-white">
        <div class="container mx-auto max-w-5xl">
            <h2 class="text-3xl font-bold text-center mb-12">它能解决什么问题？</h2>
            <div class="grid md:grid-cols-3 gap-8">
                <div class="bg-gray-50 p-6 rounded-xl card-hover">
                    <div class="text-purple-600 mb-4">
                        <i class="fas fa-clock feature-icon"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-3">手动回复耗时</h3>
                    <p class="text-gray-600">高频互动场景下，手动回复消息效率低下，难以应对大量用户咨询。</p>
                </div>
                <div class="bg-gray-50 p-6 rounded-xl card-hover">
                    <div class="text-purple-600 mb-4">
                        <i class="fas fa-robot feature-icon"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-3">缺乏个性化</h3>
                    <p class="text-gray-600">传统自动回复呆板，难以实现千人千面的个性化互动体验。</p>
                </div>
                <div class="bg-gray-50 p-6 rounded-xl card-hover">
                    <div class="text-purple-600 mb-4">
                        <i class="fas fa-tasks feature-icon"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-3">开发复杂</h3>
                    <p class="text-gray-600">定时任务和群管理功能实现复杂，需要大量开发工作。</p>
                </div>
            </div>
            <div class="mt-12 bg-blue-50 border-l-4 border-blue-500 p-4 rounded-r">
                <p class="text-blue-800 font-medium">WeChat Assistant Pro通过预配置工作流和AI集成，简化微信自动化管理，支持群聊、定时任务和个性化回复，节省时间并提升效率。</p>
            </div>
        </div>
    </section>

    <div class="section-divider my-12"></div>

    <!-- Features Section -->
    <section class="py-16 px-4 md:px-0">
        <div class="container mx-auto max-w-5xl">
            <h2 class="text-3xl font-bold text-center mb-12">核心功能概述</h2>
            <div class="grid md:grid-cols-2 gap-8">
                <div class="flex items-start">
                    <div class="bg-purple-100 p-3 rounded-full mr-4">
                        <i class="fas fa-comment-alt text-purple-600"></i>
                    </div>
                    <div>
                        <h3 class="text-xl font-semibold mb-2">AI对话集成</h3>
                        <p class="text-gray-600">支持ChatGPT、Dify、FastGPT等，生成个性化回复，适配群聊或私聊场景。</p>
                    </div>
                </div>
                <div class="flex items-start">
                    <div class="bg-purple-100 p-3 rounded-full mr-4">
                        <i class="fas fa-plug text-purple-600"></i>
                    </div>
                    <div>
                        <h3 class="text-xl font-semibold mb-2">多平台支持</h3>
                        <p class="text-gray-600">兼容微信公众号、企业微信、WhatsApp、5G消息，统一管理多渠道消息。</p>
                    </div>
                </div>
                <div class="flex items-start">
                    <div class="bg-purple-100 p-3 rounded-full mr-4">
                        <i class="fas fa-clock text-purple-600"></i>
                    </div>
                    <div>
                        <h3 class="text-xl font-semibold mb-2">定时任务</h3>
                        <p class="text-gray-600">支持RSS订阅、纪念日提醒、新闻推送等自动化任务，减少手动操作。</p>
                    </div>
                </div>
                <div class="flex items-start">
                    <div class="bg-purple-100 p-3 rounded-full mr-4">
                        <i class="fas fa-users text-purple-600"></i>
                    </div>
                    <div>
                        <h3 class="text-xl font-semibold mb-2">群管理工具</h3>
                        <p class="text-gray-600">提供跨群聊天、批量群发、群公告设置等功能，优化群运营效率。</p>
                    </div>
                </div>
                <div class="flex items-start">
                    <div class="bg-purple-100 p-3 rounded-full mr-4">
                        <i class="fas fa-microphone text-purple-600"></i>
                    </div>
                    <div>
                        <h3 class="text-xl font-semibold mb-2">语音与图像</h3>
                        <p class="text-gray-600">支持语音识别、语音发送和AI绘图，丰富交互形式。</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Use Cases Section -->
    <section class="py-16 px-4 md:px-0 bg-gray-50">
        <div class="container mx-auto max-w-5xl">
            <h2 class="text-3xl font-bold text-center mb-12">使用场景</h2>
            <div class="grid md:grid-cols-3 gap-8">
                <div class="bg-white p-6 rounded-xl shadow-sm card-hover">
                    <h3 class="text-xl font-semibold mb-3 text-purple-600">营销自动化</h3>
                    <p class="text-gray-600 mb-4">电商团队使用定时任务推送促销信息到微信群，配合ChatGPT生成个性化优惠回复，提升用户参与度。</p>
                    <div class="bg-purple-50 p-3 rounded-lg">
                        <p class="text-purple-700 font-medium">你是否需要自动化你的营销消息？</p>
                    </div>
                </div>
                <div class="bg-white p-6 rounded-xl shadow-sm card-hover">
                    <h3 class="text-xl font-semibold mb-3 text-purple-600">客户服务</h3>
                    <p class="text-gray-600 mb-4">企业通过Dify集成知识库，自动回复客户常见问题，如物流查询或产品详情，减轻人工负担。</p>
                </div>
                <div class="bg-white p-6 rounded-xl shadow-sm card-hover">
                    <h3 class="text-xl font-semibold mb-3 text-purple-600">个人助手</h3>
                    <p class="text-gray-600 mb-4">为好友设置纪念日提醒（如生日），通过AI生成温馨祝福，自动发送。</p>
                    <div class="bg-purple-50 p-3 rounded-lg">
                        <p class="text-purple-700 font-medium">你如何管理重要的个人提醒？</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Advantages Section -->
    <section class="py-16 px-4 md:px-0 bg-white">
        <div class="container mx-auto max-w-5xl">
            <h2 class="text-3xl font-bold text-center mb-12">优势与特色</h2>
            <div class="grid md:grid-cols-2 gap-8">
                <div>
                    <h3 class="text-xl font-semibold mb-4 text-purple-600">WeChat Assistant Pro 的优势</h3>
                    <ul class="space-y-4">
                        <li class="flex items-start">
                            <span class="bg-purple-100 text-purple-600 rounded-full p-1 mr-3">
                                <i class="fas fa-check text-sm"></i>
                            </span>
                            <span class="flex-1">一键AI集成：通过简单配置接入ChatGPT、Dify等，无需复杂后端开发</span>
                        </li>
                        <li class="flex items-start">
                            <span class="bg-purple-100 text-purple-600 rounded-full p-1 mr-3">
                                <i class="fas fa-check text-sm"></i>
                            </span>
                            <span class="flex-1">个性化回复：支持传递用户昵称、群ID等变量，实现千人千面回复</span>
                        </li>
                        <li class="flex items-start">
                            <span class="bg-purple-100 text-purple-600 rounded-full p-1 mr-3">
                                <i class="fas fa-check text-sm"></i>
                            </span>
                            <span class="flex-1">活跃社区：2.2k星、349次Fork，社区持续优化，提供Docker和Gitpod部署支持</span>
                        </li>
                    </ul>
                </div>
                <div>
                    <h3 class="text-xl font-semibold mb-4 text-purple-600">局限性</h3>
                    <div class="bg-red-50 border-l-4 border-red-500 p-4 rounded-r">
                        <p class="text-red-800">部署需服务器和域名，配置API密钥（如ChatGPT、Dify）有一定技术门槛</p>
                        <p class="text-red-800 mt-2">部分微信账号可能因未实名认证或风控导致登录失败</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Requirements Section -->
    <section class="py-16 px-4 md:px-0 bg-gray-50">
        <div class="container mx-auto max-w-5xl">
            <h2 class="text-3xl font-bold text-center mb-12">使用门槛与成本</h2>
            <div class="grid md:grid-cols-3 gap-8">
                <div class="bg-white p-6 rounded-xl shadow-sm">
                    <h3 class="text-xl font-semibold mb-4 text-purple-600">注册需求</h3>
                    <ul class="space-y-2 text-gray-600">
                        <li class="flex items-start">
                            <i class="fas fa-check text-green-500 mr-2 mt-1"></i>
                            <span>需注册微秘书平台获取API密钥</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-check text-green-500 mr-2 mt-1"></i>
                            <span>GitHub账户用于下载代码</span>
                        </li>
                    </ul>
                </div>
                <div class="bg-white p-6 rounded-xl shadow-sm">
                    <h3 class="text-xl font-semibold mb-4 text-purple-600">成本</h3>
                    <ul class="space-y-2 text-gray-600">
                        <li class="flex items-start">
                            <i class="fas fa-check text-green-500 mr-2 mt-1"></i>
                            <span>开源免费（MIT许可证）</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-info-circle text-blue-500 mr-2 mt-1"></i>
                            <span>需自备服务器或使用Gitpod测试</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-dollar-sign text-yellow-500 mr-2 mt-1"></i>
                            <span>AI服务（如ChatGPT、Dify）需单独付费</span>
                        </li>
                    </ul>
                </div>
                <div class="bg-white p-6 rounded-xl shadow-sm">
                    <h3 class="text-xl font-semibold mb-4 text-purple-600">环境要求</h3>
                    <ul class="space-y-2 text-gray-600">
                        <li class="flex items-start">
                            <i class="fas fa-server text-blue-500 mr-2 mt-1"></i>
                            <span>支持Docker部署</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fab fa-node-js text-green-500 mr-2 mt-1"></i>
                            <span>Node.js 16+</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-globe text-purple-500 mr-2 mt-1"></i>
                            <span>备案域名和公众号IP白名单</span>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </section>

    <!-- Getting Started Section -->
    <section id="getting-started" class="py-16 px-4 md:px-0 bg-white">
        <div class="container mx-auto max-w-5xl">
            <h2 class="text-3xl font-bold text-center mb-12">上手指南</h2>
            <div class="bg-gray-50 p-6 rounded-xl">
                <div class="mb-8">
                    <h3 class="text-xl font-semibold mb-4 flex items-center">
                        <span class="bg-purple-600 text-white rounded-full w-8 h-8 flex items-center justify-center mr-3">1</span>
                        克隆仓库
                    </h3>
                    <div class="bg-gray-800 text-gray-100 p-4 rounded-lg overflow-x-auto">
                        <pre><code class="language-bash">git clone https://github.com/leochen-g/wechat-assistant-pro.git
cd wechat-assistant-pro</code></pre>
                    </div>
                </div>
                <div class="mb-8">
                    <h3 class="text-xl font-semibold mb-4 flex items-center">
                        <span class="bg-purple-600 text-white rounded-full w-8 h-8 flex items-center justify-center mr-3">2</span>
                        安装依赖
                    </h3>
                    <div class="bg-gray-800 text-gray-100 p-4 rounded-lg overflow-x-auto">
                        <pre><code class="language-bash">npm install</code></pre>
                    </div>
                </div>
                <div class="mb-8">
                    <h3 class="text-xl font-semibold mb-4 flex items-center">
                        <span class="bg-purple-600 text-white rounded-full w-8 h-8 flex items-center justify-center mr-3">3</span>
                        配置环境
                    </h3>
                    <p class="text-gray-600 mb-4">编辑<code class="bg-gray-200 px-2 py-1 rounded">.env</code>文件，填入微秘书API密钥（AIBOTK_KEY、AIBOTK_SECRET）和公众号信息（APPID、APPSECRET、TOKEN）。</p>
                </div>
                <div class="mb-8">
                    <h3 class="text-xl font-semibold mb-4 flex items-center">
                        <span class="bg-purple-600 text-white rounded-full w-8 h-8 flex items-center justify-center mr-3">4</span>
                        Docker部署
                    </h3>
                    <div class="bg-gray-800 text-gray-100 p-4 rounded-lg overflow-x-auto">
                        <pre><code class="language-bash">docker run -d -e AIBOTK_KEY="your_key" -e AIBOTK_SECRET="your_secret" -p 8077:8077 --name=wechatbot aibotk/wechat-assistant</code></pre>
                    </div>
                </div>
                <div class="mb-8">
                    <h3 class="text-xl font-semibold mb-4 flex items-center">
                        <span class="bg-purple-600 text-white rounded-full w-8 h-8 flex items-center justify-center mr-3">5</span>
                        登录机器人
                    </h3>
                    <p class="text-gray-600 mb-4">运行后扫描终端二维码，或在微秘书平台（<a href="http://wechat.aibotk.com" class="text-purple-600 hover:underline">http://wechat.aibotk.com</a>）登录。</p>
                </div>
                <div>
                    <h3 class="text-xl font-semibold mb-4 flex items-center">
                        <span class="bg-purple-600 text-white rounded-full w-8 h-8 flex items-center justify-center mr-3">6</span>
                        配置功能
                    </h3>
                    <p class="text-gray-600 mb-4">在微秘书平台设置AI角色、定时任务或群管理规则，发送"更新"关键词拉取配置。</p>
                    <div class="bg-blue-50 border-l-4 border-blue-500 p-4 rounded-r">
                        <p class="text-blue-800 font-medium">建议先在Gitpod测试环境运行，避免本地配置问题。</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Architecture Diagram -->
    <section class="py-16 px-4 md:px-0 bg-gray-50">
        <div class="container mx-auto max-w-5xl">
            <h2 class="text-3xl font-bold text-center mb-12">系统架构概览</h2>
            <div class="bg-white p-6 rounded-xl shadow-sm">
                <div class="mermaid">
                    graph TD
                        A[用户] -->|微信消息| B[WeChat Assistant Pro]
                        B --> C[微秘书平台]
                        C --> D[ChatGPT]
                        C --> E[Dify]
                        C --> F[FastGPT]
                        B --> G[微信公众号]
                        B --> H[企业微信]
                        B --> I[WhatsApp]
                        C --> J[定时任务]
                        J --> K[RSS订阅]
                        J --> L[纪念日提醒]
                        J --> M[新闻推送]
                        B --> N[群管理功能]
                        N --> O[跨群聊天]
                        N --> P[批量群发]
                        N --> Q[群公告设置]
                </div>
            </div>
        </div>
    </section>

    <script>
        mermaid.initialize({
            startOnLoad: true,
            theme: 'default',
            flowchart: {
                useMaxWidth: true,
                htmlLabels: true,
                curve: 'basis'
            }
        });
    </script>
</body>
</html>
```